<template>
  <div>
    <div class=" flex-row houseList">
      <div class="flex-grow-0 indexImgPath">
        <img class="img" :src="item.IndexImagePath"/>
        <img mode="widthFix" v-if="item.videoUrl" class="icon-play" src="/images/video-play.png"/>
      </div>
      <div class="flex-grow-1">
        <div class="item-info-box">
          <div class="item-title">{{item.titleDesc}}</div>
          <div style="margin-top: 10rpx">
            <span>{{item.quxian}}</span>
            <span class="line"> | </span>
            <span>{{item.Community}}</span>
          </div>
          <div style="font-size:24rpx">
            <span style="color:#f63800">
              <span style="font-size:30rpx; font-weight: bold">{{item.totalPrice}}</span><span>万</span>
            </span>
            <span class="line"> | </span>
            <span>{{item.jifang}}</span>
            <span class="line"> | </span>
            <span>{{item.AreaStr}}㎡</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "TwoRowList",
    props: {
      item: {
        type: Object,
        default: {}
      }
    }
  }
</script>

<style scoped>

  .houseList {
    padding: 22rpx;
    background: #fff;
    border-bottom: 1rpx solid #f2f2f2;
  }
  .houseList .indexImgPath {
    width: 220rpx;
    height: 166rpx;
    position: relative;
    overflow: hidden;
  }
  .houseList .indexImgPath .img {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .houseList .indexImgPath .icon-play {
    position: absolute;
    width: 45rpx;
    height: 45rpx;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .houseList .item-info-box {
    padding-left: 20rpx;
    font-size: 24rpx;
    color: #686b72;
  }
  .houseList .item-info-box .line {
    color: #e8e8e8;
  }
  .houseList .item-title {
    font-size: 30rpx;
    color: #000000;
    line-height: 40rpx;
  }
  .houseList .item-desc {
    font-size: 24rpx;
    color: #777;
  }
  .houseList .item-desc1 {
    font-size: 24rpx;
    color: #777;
  }
  .houseList .totalPrice {
    font-size: 30rpx;
    color: #fa3700;
  }
</style>